<script setup lang="ts">
// import { defineProps } from 'vue'
import MessageItem from './MessageItem.vue'

interface MessageType {
  type: 'user' | 'ai';
  content: string;
  hasThinking?: boolean;
  thinking?: {
    content: string;
    done: boolean;
    time: number;
    startTime?: number;
  };
}

defineProps({
  messages: {
    type: Array as () => MessageType[],
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div class="message-list">
    <MessageItem v-for="(msg, index) in messages" :key="index" :type="msg.type" :content="msg.content"
      :has-thinking="msg.hasThinking" :thinking="msg.thinking" :is-loading="loading"
      :is-last="index === messages.length - 1" />
  </div>
</template>

<style lang="scss" scoped>
.message-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>